<template>
    <view v-if="props.modelValue" class="level_popup" @touchmove.stop.prevent="() => {}">
        <view class="popup">
            <view class="title">{{ props.title }}</view>
            <view class="content"><slot name="content"></slot></view>
        </view>
        <view class="close"> <image src="/static/marker/close.png" @click="onClose" /> </view>
    </view>
</template>

<script setup>
import storage from '@/commons/storage';
import { reactive } from 'vue';
const props = defineProps({
    modelValue: { type: Boolean, default: false },
    title: { type: String, default: '' }
});
const emit = defineEmits(['update:modelValue']);
const state = reactive({
    name: ''
});
state.name = storage.get('dtbName');
const onClose = () => {
    emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.level_popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    // 过渡动画
    transition: all 0.3s;

    .popup {
        width: calc(100% - 200rpx);
        margin-top: 342rpx;
        background: #ffffff;
        border-radius: 14rpx;
        box-sizing: border-box;
        .title {
            padding: 29rpx 0;
            border-bottom: 2rpx solid #e5e5e5;
            font-size: 31rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            text-align: center;
            font-weight: 500;
            color: #33302d;
        }
        .content {
            padding: 54rpx 62rpx;
            font-size: 25rpx;
            text-align: center;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 36rpx;
            .pop-img {
                width: 438rpx;
                height: 438rpx;
            }
        }
    }
    .close {
        margin-top: 42rpx;
        text-align: center;
        image {
            width: 58rpx;
            height: 58rpx;
        }
    }
}
</style>
